import "./mask.css"
import { Button } from 'antd'
import React, { Component } from 'react'
import axios from "axios"

export default class mask extends Component {
    constructor(props) {
        super(props)
        this.state={
            data:{},
            dataCopy:{}
        }
    }
    componentWillReceiveProps(nextProps){
        let arr = nextProps.data
        this.setState({
            data:{...arr},
        })
    }
    //提交
    async commit(){
        if (!this.state.data.sheng || !this.state.data.zong || !this.state.data.shou || !this.state.data.xiangmu || !this.state.data.zhou || !this.state.data.ren) {
            this.xiaoque.style = "display:block"
            this.kongli.style = "display:block"
            this.chali.style = "display:none"
            console.log(this.success)
            this.error.style = "display:block"

        }else {
            let arr = await axios({
                    url:"http://10.35.166.207:8088/xiugai",
                    params:{
                      id:this.state.data.id,
                      sheng:this.state.data.sheng,
                      zong:this.state.data.zong,
                      shou:this.state.data.shou,
                      xiangmu:this.state.data.xiangmu,
                      zhou:this.state.data.zhou,
                      ren:this.state.data.ren
                    }
                })
            if (arr.data) {
            this.xiaoque.style = "display:block"
            this.chali.style = "display:block"
            this.kongli.style = "display:none"
            this.error.style = "display:none"
            this.success.style = "display:block"
                this.setState({
                    data: {}
                })
                this.props.fn()
            }
        }
        // console.log("this.props.data",this.props.data)
        // let arr = await axios({
        //     url:"http://10.35.166.207:8088/xiugai",
        //     params:{
        //       id:this.state.data.id,
        //       sheng:this.state.data.sheng,
        //       zong:this.state.data.zong,
        //       shou:this.state.data.shou,
        //       xiangmu:this.state.data.xiangmu,
        //       zhou:this.state.data.zhou,
        //       ren:this.state.data.ren
        //     }
        // })
        // if(arr.data){
        //     this.props.cancel1.id="hidden1"
        //     alert("修改成功")
        //     this.props.fn()
        // }
    }
    quxiaoxiao() {
        this.props.cancel1.id = "hidden1"
        this.xiaoque.style = "display:none"
        this.chali.style = "display:none"
        this.kongli.style = "display:none"
        this.error.style = "display:none"
        this.success.style = "display:none"
    }
    close() {
        this.xiaoque.style = "display:none"
    }
    //取消
    back() {
        this.props.cancel1.id = "hidden1"
        this.setState({
            data:{}
        })
    }
    //修改信息
    changeInfo(ev){
        let text = ev.target.value
        let arr = this.state.data
        this.setState({
            data:{
                ...arr,
                [ev.target.className]:text
            }
        })
    }
    render() {
        return (
            <div id="box1" >
                <div className="queren" ref={(ref) => { this.xiaoque = ref }}>
                    <div className="querenbox">
                        <li className="chali" ref={(ref) => { this.chali = ref }}>修改成功</li>
                        <li className="kongli" ref={(ref) => { this.kongli = ref }}>不能为空</li><br />
                        <div className="con" ref={(ref) => { this.success = ref }}>
                            <Button type='danger' onClick={() => this.quxiaoxiao()}>确认</Button>
                        </div>
                        <div className="con" ref={(ref) => { this.error = ref }}>
                            <Button type='danger' onClick={() => this.close()}>确认</Button>
                        </div>
                    </div>
                </div>
                <div id="pop">
                    <h2>编辑投资信息</h2>
                    <div id="form">
                        <p>*省份：<input type="text" className="sheng" value={this.state.data.sheng} onChange={(ev)=>this.changeInfo(ev)}/></p>
                        <p>*投资总额：<input type="text" className="zong" value={this.state.data.zong}  onChange={(ev)=>this.changeInfo(ev)}/></p>
                        <p>*收益总额：<input type="text" className="shou" value={this.state.data.shou}  onChange={(ev)=>this.changeInfo(ev)}/></p>
                        <p>*主要投资项目：<input type="text" className="xiangmu" value={this.state.data.xiangmu}  onChange={(ev)=>this.changeInfo(ev)}/></p>
                        <p>*投资周期：<input type="text" className="zhou" value={this.state.data.zhou}  onChange={(ev)=>this.changeInfo(ev)}/></p>
                        <p>*投资人数：<input type="text" className="ren" value={this.state.data.ren}  onChange={(ev)=>this.changeInfo(ev)}/></p>
                        <p className="commit"><Button type="primary" className="button"  onClick={() => this.commit()}>确定</Button><Button onClick={() => this.back()}>取消</Button></p>
                    </div>
                </div>

            </div>
        )
    }
}
